<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0031)http://w3help.org/zh-cn/kb/008/ -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>KB008: 包含块( Containing block )  - W3Help</title>
<meta name="keywords" content="包含块, containing, block">
<meta name="description" content="KB008: 包含块( Containing block ) ">
<link rel="stylesheet" type="text/css" href="./KB008_ 包含块( Containing block ) - W3Help_files/common.css" media="all">
<link rel="stylesheet" type="text/css" href="./KB008_ 包含块( Containing block ) - W3Help_files/article.css" media="all">
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script type="text/javascript" src="./KB008_ 包含块( Containing block ) - W3Help_files/global.js"></script>
</head>
<body>
<div id="w3h_container">
  <div id="w3h_header">
    <div class="header_sidebar">
      <h1 class="logo"><a href="http://w3help.org/"><span>W3Help</span></a></h1>
    </div>
    <div class="header_content">
      <ul class="navigation">
        <li class="first_item"><a href="http://w3help.org/">首页</a></li>
        <li><a href="http://w3help.org/zh-cn/home/events.html">活动</a></li>
        <li><a href="http://w3help.org/zh-cn/home/news.html">新闻</a></li>
        <li><a href="http://w3help.org/zh-cn/home/forum.html">论坛</a></li>
        <li class="last_item"><a href="http://w3help.org/zh-cn/home/about.html">关于我们</a></li>
        <li class="search_item">
          <form action="http://w3help.org/zh-cn/home/search.html" method="get">
            <p>
              <input name="key" id="keyInput" value="" onfocus="focusKey(this)" onblur="blurKey(this)" title="搜索" class="text">
            </p>
            <p>
              <input id="search_submit" type="image" src="./KB008_ 包含块( Containing block ) - W3Help_files/search_button.gif" alt="搜索">
            </p>
          </form>
        </li>
      </ul>
    </div>
  </div>
  <div id="w3h_body">
    <div class="body_sidebar">
      <div class="logo_shadow"></div>
      <h2 class="category"><span><a href="http://w3help.org/zh-cn/home/standards.html">标准</a></span></h2>
      <ul class="theme">
        <li><a href="http://w3help.org/zh-cn/standards">W3C 标准</a></li>
        <li><a href="http://w3help.org/zh-cn/home/glossary.html">词汇表</a></li>
      </ul>
      <h2 class="category"><span><a href="http://w3help.org/zh-cn/home/compatibility.html">兼容性</a></span></h2>
      <ul class="theme">
        <li><a href="http://w3help.org/zh-cn/causes/index.html">根本原因</a></li>
        <li><a href="http://w3help.org/zh-cn/kb" class="current">知识库</a></li>
        <li><a href="http://w3help.org/zh-cn/casestudies">案例分析</a></li>
      </ul>
    </div>
    <div class="body_content">
      <p id="printButton"><a href="javascript:printArticle()" title="打印本文">打印</a></p>
      <ul class="breadcrumbs">
        <li><a href="http://w3help.org/" name="top">首页</a> <span>»</span></li>
        <li><a href="http://w3help.org/zh-cn/home/compatibility.html">兼容性</a> <span>»</span></li>
        <li><a href="http://w3help.org/zh-cn/kb/008/index.html">知识库</a> <span>»</span></li>
        <li class="current">文章正文</li>
      </ul>
      
    <h1 class="title">KB008: 包含块( Containing block ) </h1>
    <ul class="toc">
        <li><a href="http://w3help.org/zh-cn/kb/008/#header_1">包含块简介</a> <span>•</span></li>
        <li><a href="http://w3help.org/zh-cn/kb/008/#header_2">包含块判定及其范围</a> <span>•</span></li>
        <li><a href="http://w3help.org/zh-cn/kb/008/#header_3">引申阅读</a> </li>
    </ul>
    
      <div id="w3h_content">
        
        <address class="author">作者：武利剑</address>
        <h2 id="header_1">包含块简介</h2>
        <p>在 CSS2.1 中，很多框的定位和尺寸的计算，都取决于一个矩形的边界，这个矩形，被称作是包含块( containing block )。
            一般来说，(元素)生成的框会扮演它子孙元素包含块的角色；我们称之为：一个(元素的)框为它的子孙节点建造了包含块。包含块是一个相对的概念。</p>
        <pre>&lt;div&gt;
    &lt;table&gt;
        &lt;tr&gt;
            &lt;td&gt;hi&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
&lt;/div&gt;</pre>
        <p>以上代码为例，DIV 和 TABLE 都是包含块。DIV 是 TABLE 的包含块，同时 TABLE 又是 TD 的包含块，不是绝对的。</p>
        <p>“一个框的包含块”，指的是“该框所存在的那个包含块”，并不是它建造的包含块。比如，上述代码中，TABLE 的包含块，说的是 DIV 建造的包含块，而不是 TABLE 自身建造的包含块。TABLE 建造的包含块，可以称作 TD 的包含块。</p>
        <p>每个框关于它的包含块都有一个位置，但是它不会被包含块限制；它可以溢出(包含块)。包含块上可以通过设置 'overflow' 特性达到处理溢出的子孙元素的目的。</p>
        <p>包含块的概念很重要，因为可视化格式模型中很多的理论性知识都跟这个概念有关系，比如，宽度高度自动值的计算，浮动元素的定位，绝对定位元素的定位等等。不了解包含块，就掌握不好以它为基础的后续理论。</p>

        <h2 id="header_2">包含块判定及其范围</h2>
        <p>由上面内容可知，元素框的定位和尺寸与其包含块有关，而元素会为它的子孙元素创建包含块。</p>
        <p>那么，是不是说，元素的包含块就是它的父元素呢？包含块的区域是不是父元素的内容区域呢？
           答案是否定的。此节中，将给出各类元素包含块的判断以及包含块的区域范围。
           如果不存在符合判断标准的祖先元素，那么元素的包含块就是初始包含块。</p>
        <p>包含块判定总流程图如下：</p>
        <p><img src="./KB008_ 包含块( Containing block ) - W3Help_files/CB4.png" alt=""></p>

        <h3>根元素</h3>
        <p>根元素，就是处于文档树最顶端的元素，它没有父节点。</p>
        <p>根元素存在的包含块，被叫做初始包含块 (initial containing block)。具体，跟用户端有关。</p>
        <ul>
            <li>在 (X)HTML 中，根元素是 html 元 素（尽管有的浏览器会不正确地使用 body 元素）。</li>
            <li>而初始包含块的 direction 属性与根元素相同。</li>
        </ul>

        <h3>静态定位元素和相对定位元素</h3>
        <p>如果该元素的定位（position）为 "relative" （相对定位）或者 "static"（静态定位），它的包含块由它最近的块级、单元格（table cell）或者行内块（inline-block）祖先元素的
            <span class="hl_4">内容框</span><sup>1</sup>创建。</p>
        <p>元素如果未声明 'position' 特性，那么就会采用 'position' 的默认值 "static"。</p>
        <pre>&lt;table id="table1"&gt;
  &lt;tr&gt;
      &lt;td id="td1"&gt;
          &lt;div id="div1" style="padding:20px;border:1px solid red;"&gt;
               &lt;span&gt;
                   &lt;strong id=”greed” style="<span class="hl_2">position:relative;</span>"&gt;greed is&lt;/strong&gt;
                   good 999999
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</pre>
        <p>包含块关系表：</p>
        <table class="compare">
            <tbody><tr>
                <th> 元素 </th>
                <th> 包含块 </th>
            </tr>
            <tr>
                <td>table1</td>
                <td>body</td>
            </tr>
            <tr>
                <td>td1</td>
                <td>table1</td>
            </tr>
            <tr>
                <td>div1</td>
                <td>td1</td>
            </tr>
            <tr>
                <td>greed</td>
                <td>div1</td>
            </tr>
         </tbody></table>
        <p>SPAN 元素中包含的文本在 div1 中的位置可以看出，div1 创建的包含块的区域是它的内容边界，也就是内边界。</p>

        <h3>固定定位元素</h3>
        <p>如果元素是固定定位 ("position:fixed") 元素，那么它的包含块是当前可视窗口<sup>2</sup>。</p>

        <h3>绝对定位元素</h3>
        <p>总的来说，绝对定位（"position: absolute"）元素的包含块由离它最近的 'position' 属性为 'absolute'、'relative' 或者 'fixed' 的祖先元素创建。</p>
      <h4>如果其祖先元素是行内元素，则包含块取决于其祖先元素的 'direction' 特性</h4>
        <p><strong>1). 如果 'direction' 是 'ltr'，包含块的顶、左边是祖先元素生成的第一个框的顶、左内边距边界(padding edges) ，右、下边是祖先元素生成的最后一个框的右、下内边距边界(padding edges)</strong> </p>
        <p>示例代码：</p>
        <pre>&lt;p style="border:1px solid red; width:200px; padding:20px;"&gt;
    T
    &lt;span style="background-color:#C0C0C0; <span class="hl_3">position:relative;</span>"&gt;
            这段文字从左向右排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们包含块的边缘。
            &lt;em style="<span class="hl_1">position:absolute;</span> color:red; top:0; left:0;"&gt;XX&lt;/em&gt;
            &lt;em style="<span class="hl_2">position:absolute;</span> color:yellow; top:20px; left:0;"&gt;XX&lt;/em&gt;
            &lt;em style="<span class="hl_4">position:absolute;</span> color:blue; bottom:0; right:0;"&gt;XX&lt;/em&gt;
    &lt;/span&gt;
&lt;/p&gt;</pre>
        <p>以上代码中，文字采取默认从左到右的方式排列。红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的 SPAN。
            它们定位需要参照包含块，按照标准来说，它们包含块的左顶边是 SPAN 形成的第一个框（即第一行的灰色部分）的顶、左内边距边，包含块的右、下边是 SPAN 生成的最后一个框（最后一行灰色的部分）的右、下内边距边界。</p>
        <p>示意图：<br><img src="./KB008_ 包含块( Containing block ) - W3Help_files/CB1.png" alt=""></p>
        <p>行内元素内形成的包含块，在各浏览器中各不相同，存在兼容性问题。可以通过上面的例子可以证明这一点。蓝色的 "XX" 的位置在各浏览器中都不一样。</p>
        <p>包含块的宽度可能是<span class="hl_2">负</span>的。</p>
        <p>示例代码：</p>
        <pre>&lt;p style="border:1px solid red; width:200px; padding:20px;"&gt;
    TEXT TEXT TEXT
    &lt;span style="background-color:#C0C0C0; <span class="hl_1">position:relative;</span>"&gt;
        这段文字从左向右排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们包含块的边缘。
        &lt;em style="<span class="hl_2">position:absolute;</span> color:red; top:0; left:0;"&gt;XX&lt;/em&gt;
        &lt;em style="<span class="hl_5">position:absolute;</span> color:yellow; top:20px; left:0;"&gt;XX&lt;/em&gt;
        &lt;em style="<span class="hl_4">position:absolute;</span> color:blue; bottom:0; right:0;"&gt;XX&lt;/em&gt;
    &lt;/span&gt;
&lt;/p&gt;</pre>
        <p>示意图：<br><img src="./KB008_ 包含块( Containing block ) - W3Help_files/CB2.png" alt=""></p>
        <p>以上的边界无法围成一个区域，在这种情况下，包含块的宽度是负的。</p>
        <p><strong>2). 如果 'direction' 是 'rtl'，包含块的顶、右边是祖先元素生成的第一个框的顶、右内边距边界 (padding edges) ，左、下边是祖先元素生成的最后一个框的左、下内边距边界 (padding edges)</strong></p>
        <p>示例代码：</p>
        <pre>&lt;p style="border:1px solid red; width:200px; padding:20px; <span class="hl_5">direction:rtl;</span>"&gt;
    T
    &lt;span style="background-color:#C0C0C0; <span class="hl_3">position:relative;</span>"&gt;
         这段文字从右向左排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。可以通过它们绝对定位的位置来判断它们……
        &lt;em style="<span class="hl_1">position:absolute;</span> color:red; top:0; left:0;"&gt;XX&lt;/em&gt;
        &lt;em style="<span class="hl_4">position:absolute;</span> color:yellow; top:20px; left:0;"&gt;XX&lt;/em&gt;
        &lt;em style="<span class="hl_2">position:absolute;</span> color:blue; bottom:0; right:0;"&gt;XX&lt;/em&gt;
    &lt;/span&gt;
&lt;/p&gt;</pre>
        <p>示意图：<br><img src="./KB008_ 包含块( Containing block ) - W3Help_files/CB3.png" alt=""></p>
        <h4>其他情况下，如果祖先元素不是行内元素，那么包含块的区域应该是祖先元素的<span class="hl_2">内边距</span>边界</h4>
        <p>示例代码：</p>
        <pre>&lt;div id="container" style="padding:50px; background-color:#c0c0c0; <span class="hl_1">position:relative;</span> width:200px; height:200px;"&gt;
    &lt;div id="div1" style="width:100%; height:100%; border:2px solid blue;"&gt;
        &lt;div id="content" style="border:1px solid red; <span class="hl_4">position:absolute;</span> left:0; top:0;"&gt;absolute element&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>
        <p>以上代码中，content 的父元素虽是 div1，但，按照标准它的包含块应该是 container。</p>

        <p class="comment">注：</p>
        <ol class="comment">
            <li>关于内容框，请参照： <a href="http://w3help.org/zh-cn/kb/006/">W3Help - KB006: CSS 框模型( Box module )</a></li>
            <li>见 <a href="http://w3help.org/zh-cn/kb/007/">W3Help - KB007: 可视化格式模型( visual formatting model )简介</a>中的视口( viewport )</li>
        </ol>

        <h2 id="header_3">引申阅读</h2>
        <p>相关浏览器对包含块判定引起的兼容性问题，可以参考：</p>
        <ul class="see_also">
            <li><a href="http://w3help.org/zh-cn/causes/RM8011">RM8011: Firefox 浏览器对 TABLE 中绝对定位元素包含块的判定有错误，某些情况下会导致绝对定位元素位置跟其他浏览器中有差异</a></li>
            <li><a href="http://w3help.org/zh-cn/causes/RM8014">RM8014: IE6 IE7 IE8(Q) 中某些情况下浮动元素会在其浮动方向溢出其包含块</a></li>
        </ul>

        <div class="appendix">
            <h2>测试环境</h2>
            <table class="list">
                <tbody><tr>
                    <th>操作系统版本:</th>
                    <td>Windows 7 Ultimate build 7600</td>
                </tr>
                <tr>
                    <th>浏览器版本:</th>
                    <td>
                        IE6<br>
                        IE7<br>
                        IE8<br>
                        Firefox 3.6.10<br>
                        Chrome 7.0.517.0 dev<br>
                        Safari 5.0.2<br>
                        Opera 10.62
                    </td>
                </tr>
                <tr>
                    <th>测试页面:</th>
                    <td>&nbsp;</td>
              </tr>
                <tr>
                    <th>本文更新时间:</th>
                    <td>2010-09-20</td>
                </tr>
            </tbody></table>

            <h2>关键字</h2>
            <!-- keywords begin -->
            <p>包含块 containing block</p>
            <!-- keywords end -->
        </div>
        
      </div>
    </div>
  </div>
</div>
<div id="w3h_footer">
  <div class="footer_content">
    <ul>
      <li><a href="http://www.google.com/"><img src="./KB008_ 包含块( Containing block ) - W3Help_files/google.gif" alt="Google"></a></li>
      <li><a href="http://www.chinaw3c.org/"><img src="./KB008_ 包含块( Containing block ) - W3Help_files/w3c-china.gif" alt="W3C-China"></a></li>
      <li><a href="http://www.mozillaonline.com/"><img src="./KB008_ 包含块( Containing block ) - W3Help_files/firefox.gif" alt="FireFox"></a></li>
      <li><a href="http://www.csdn.net/"><img src="./KB008_ 包含块( Containing block ) - W3Help_files/csdn.gif" alt="CSDN"></a></li>
      <li><a href="http://www.w3school.com.cn/"><img src="./KB008_ 包含块( Containing block ) - W3Help_files/w3school.gif" alt="W3School"></a></li>
      <li><a href="http://www.w3ctech.com/"><img src="./KB008_ 包含块( Containing block ) - W3Help_files/web-club.gif" alt="w3ctech"></a></li>
    </ul>
    <p class="copyright">
      <a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img alt="知识共享许可协议" style="border-width:0" src="./KB008_ 包含块( Containing block ) - W3Help_files/88x31.png"></a><br>本作品采用<a rel="license" href="http://creativecommons.org/licenses/by/3.0/">知识共享署名 3.0 Unported许可协议</a>进行许可。
      <br><br><a href="http://www.miibeian.gov.cn/">京ICP备10208242号</a>
    </p>
    <p class="w3cIcon">
      <a href="http://validator.w3.org/check?uri=referer"><img src="./KB008_ 包含块( Containing block ) - W3Help_files/valid-xhtml10.gif" alt="Valid XHTML 1.0 Strict" height="31" width="88"></a>
    </p>
  </div>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-18304141-1']);
_gaq.push(['_trackPageview']);
(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>


</body></html>